<template>
  <v-card class="filesearch" id="filesearchArea">
    <v-card class="filesearch-input">
      <v-row>
        <v-col cols="3" class="default">
          <v-text-field
            denseoutlined
            solo
            dense
            color="red"
            clearable
            success
          ></v-text-field>
        </v-col>
        <v-col cols="3" class="default">
          <v-card class="query-condition">
            <v-card class="multiple check">
              <v-checkbox v-model="chFile" color="selected" hide-details>
                <template v-slot:label>
                  <div class="labels">包括子文件</div>
                </template></v-checkbox
              >
            </v-card>
            <v-card class="inquire">
              <v-btn
                tile
                color="#e8e8e8"
                class="btn"
                width="64px"
                style="color: black"
                @click="toseatch"
              >
                <span class="iconfont icon-sousuo" style="color: black"></span>
                查询
              </v-btn>
              <div class="btns">
                <v-btn
                  tile
                  color="#e8e8e8"
                  style="color: black"
                  width="60"
                  @click="openDialog"
                  class="btn"
                  x-small
                >
                  高级查询
                </v-btn>
              </div>
              <div class="btns">
                <v-tooltip class="btn" bottom color="#fff" z-index="999">
                  <template v-slot:activator="{ on, attrs }">
                    <span
                      v-bind="attrs"
                      v-on="on"
                      class="wenhao icons iconfont icon-wenhao"
                      style="
                        padding: 0 7px;
                        background: #e8e8e8;
                        font-size: 19px;
                      "
                    ></span>
                  </template>
                  <div class="hint">
                    <h3>关键字搜索说明</h3>
                    <p>通配符种类：*通配0-N个词 ; ？</p>
                    <p>
                      通配1个此通配符位置：可以放置条件的前端、中间和末端，例如：*very、goo*、th*nk
                    </p>
                    <p>
                      注意：支持一个字母更通配符的搭配，但不建议此方式搜索，例如：a*或者*a
                    </p>
                  </div>
                </v-tooltip>
              </div>
            </v-card>
          </v-card>
        </v-col>
        <v-col class="btnGroup">
          <v-btn depressed :disabled="ope.read">
            <span class="fa fa-book"></span> 借阅</v-btn
          >
          <v-btn depressed :disabled="ope.chFile">
            <span class="fa fa-arrow-circle-o-up"></span> 子文件取号
          </v-btn>
          <v-btn depressed :disabled="ope.edit">
            <span class="fa fa-edit"></span> 修改
          </v-btn>
          <v-btn depressed :disabled="ope.rub">
            <span class="fa fa-trash-o"></span> 作废
          </v-btn>
          <v-btn depressed :disabled="ope.share">
            <span class="fa fa-share-square-o"></span> 外发
          </v-btn>
          <v-btn depressed :disabled="ope.exp">
            <span class="fa fa-paperclip"></span> 导出
          </v-btn>
        </v-col>
      </v-row>
    </v-card>
    <!-- 搜索弹窗 -->
    <formContent ref="formContent"></formContent>

    <!-- 表格 -->
    <v-card class="filesearch-from">
      <vxe-table
        resizable
        border
        highlight-hover-row
        ref="xTree"
        :tree-config="{
          children: 'children',
        }"
        :data="tableData2"
        :loading="loading2"
        row-id="id"
        style="font-size: 12px"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectAllEvent"
      >
        <vxe-column type="checkbox" width="40"></vxe-column>
        <vxe-column tree-node min-width="50">
          <template #default="{ row }">
            <span>
              <span
                @click="skipDetails(row)"
                class="pointer iconfont icon-book-information-i-borrow"
              ></span>
              <span class="pointer iconfont icon-xingxing"></span>
              <span class="pointer iconfont icon-youjian"></span>
            </span>
          </template>
        </vxe-column>
        <vxe-column field="links" width="40">
          <template #default="{ row }">
            <span v-if="row.childrenID != '' && row.childrenID != null">
              <a
                href="http://192.168.123.100/preview.html?fileid=768"
                target="_blank"
                ><span class="fa fa-paperclip"></span
              ></a>
            </span>
          </template>
        </vxe-column>
        <vxe-column field="name" title="文件编号"></vxe-column>
        <vxe-column
          field="size"
          title="文件标题"
          min-width="90"
          show-overflow="ellipsis"
        >
          <template #default="{ row }">
            <span>
              <a
                :href="`http://192.168.123.100/preview.html?fileid=768`"
                target="_blank"
                >{{ row.nickname }}</a
              >
            </span>
          </template>
        </vxe-column>
        <vxe-column field="sex" title="版本"></vxe-column>
        <vxe-column field="grade" title="密级"></vxe-column>
        <vxe-column field="username" title="取号人"></vxe-column>
        <vxe-column field="getMarkDate" title="取号日期"></vxe-column>
        <vxe-column field="department" title="所属部门"></vxe-column>
        <vxe-column field="status" title="文件状态"></vxe-column>
        <vxe-column field="releaseDate" title="发放日期"></vxe-column>
        <vxe-column field="figureNumber" title="点击量"></vxe-column>
      </vxe-table>
      <vxe-pager
        border
        size="medium"
        :loading="loading2"
        :current-page="tablePage2.currentPage"
        :page-size="tablePage2.pageSize"
        :total="tablePage2.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total',
        ]"
        @page-change="handlePageChange2"
      >
      </vxe-pager> </v-card
  ></v-card>
</template>

<script>
import { list } from "../../assets/list";
// import textinput from "./textInput.vue";
// import selectinput from "./selectinput.vue";
import formContent from "./formContent.vue";

// var email = require("emailjs") ;

export default {
  components: { formContent },
  data() {
    return {
      time1: null,
      code: "",
      picker: new Date(Date.now() - new Date().getTimezoneOffset() * 60000)
        .toISOString()
        .substr(0, 10),
      chFile: false,
      loading2: false,
      tableData2: [],
      tablePage2: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      ope: {
        read: false,
        chFile: false,
        edit: false,
        rub: true,
        share: false,
        exp: true,
      },
    };
  },
  created() {
    this.findList2();
  },
  mounted() {
    // console.log(this.$refs);
    // &${this.$cookies.get('token')}
    console.log(this.$cookies.isKey("token"));
  },
  methods: {
    selectAllEvent({ checked, records }) {
      console.log(checked ? "所有勾选事件" : "所有取消事件", records);
    },
    selectChangeEvent({ checked, records }) {
      console.log(checked ? "勾选事件" : "取消事件", records);
    },
    skipDetails() {
      // console.log(data.age);
      this.$router.push({
        path: `/FileForDetails`,
      });
    },
    findList2() {
      this.loading2 = true;
      setTimeout(() => {
        // const list = [];
        this.loading2 = false;
        this.tablePage2.totalResult = list.length;
        this.tableData2 = list.slice(
          (this.tablePage2.currentPage - 1) * this.tablePage2.pageSize,
          this.tablePage2.currentPage * this.tablePage2.pageSize
        );
      }, 300);
    },
    handlePageChange2({ currentPage, pageSize }) {
      this.tablePage2.currentPage = currentPage;
      this.tablePage2.pageSize = pageSize;
      this.findList2();
    },
    toseatch() {
      console.log(this.$refs.formContent.form);
    },
    openDialog() {
      this.$refs.formContent.dialog = true;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss">
#filesearchArea {
  .labels {
    font-size: 12px;
    margin-right: 5px;
    color: black;
  }
  .filesearch-input {
    .row {
      margin: 0 !important;
    }
    input {
      width: 100%;
      // border: 2px solid #eee;
      border-radius: 5px;
    }
    .query-condition {
      display: flex;
      .v-btn--is-elevated {
        box-shadow: none;
      }
    }

    .multiple {
      display: flex;
      background: rgb(232, 232, 232) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      .v-input--selection-controls {
        margin: 0;
        padding: 0;
      }
      .v-input__slot {
        width: 97px;
      }
    }
    .btns {
      border-left: 2px solid rgb(204, 204, 204);
    }
    .wenhao:hover {
      cursor: pointer;
      background: #dddddd !important;
    }
    .icons {
      position: relative;
      display: inline-block;
      height: 100%;
      border-radius: 0;
      border-bottom-left-radius: unset !important;
      border-bottom-right-radius: unset !important;
      .search-lit {
        position: absolute;
        z-index: 99;
        width: 990px;
        height: 500px;
      }
    }
    .default {
      padding: 0;
    }
    .inquire {
      display: flex;
      border: 2px solid rgb(204, 204, 204);
      border-left: 0;
      border-bottom-left-radius: unset !important;
      border-top-left-radius: unset !important;
      .btn {
        height: 100% !important;
        font-size: 12px;
        padding: 0 !important;
        color: rgba(0, 0, 0, 0.6);
      }
    }
    .check {
      box-shadow: none !important;
      border: 2px solid rgb(204, 204, 204);
    }

    .v-btn {
      vertical-align: top !important;
    }
  }
  .condition-list {
    background: #fff !important;
    color: black;
    width: 1100px;
    max-height: 550px !important;
    overflow: hidden;
    overflow-y: scroll;
    .select-class {
      height: 28px;
    }
    .ipt-width {
      width: 190px !important;
      display: flex;
      height: 30px;
      input {
        width: 100%;
        text-indent: 5px;
      }
    }
  }
  .pointer:hover {
    cursor: pointer;
  }
  .d-flex {
    // justify-content: right;
    font-size: 13px;
    padding: 5px 5px;
  }
  .date-picker {
    position: absolute;
    z-index: 9999;
  }
  .v-input--selection-controls {
    padding: 0 !important;
    margin: 0 !important;
  }
  .colslist {
    padding: 0 !important;
  }
  .condition-btn {
    text-align: center;
    padding: 20px;
  }

  .container > div:nth-last-of-type(3) {
    margin-top: 40px;
  }
  .hint {
    border: 2px solid #eee;
    color: black;
    padding: 5px;
    border-radius: 5px;
    width: 400px;
    p {
      margin: 5px !important;
    }
  }
  .formdatalist-bottom {
    max-width: 15% !important;
    font-size: 13px;
    margin-right: 5px !important;
  }
  #input-42 {
    height: 29px !important;
    border: none;
  }
}
.dialogArea {
  .v-input__control {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .condition-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .condition-list-item > span {
    display: inline-block;
    width: 100px;
    text-align: left;
  }
  .v-dialog {
    background: red;
  }
  .v-input__control {
    flex-direction: unset;
    display: flex;
    width: 250px;
    .v-input__slot {
      width: 75%;
    }
  }
  .v-messages__message {
    line-height: 30px;
    height: 30px;
  }
  .v-text-field.v-text-field--enclosed .v-text-field__details {
    margin: 0;
  }
}
.v-tooltip__content {
  border: 2px solid #eee !important;
  .hint {
    color: black;
    padding: 5px;
    border-radius: 5px;
    width: 400px;
    p {
      margin: 5px !important;
    }
  }
}
.container.formArea {
  max-width: unset;
  width: 100%;
}
.dialogArea {
  padding: 10px;
}

.v-dialog {
  box-shadow: unset !important;
  background: white;
}
.btnGroup {
  padding: 0;
  button {
    height: 32px !important;
    border: 2px solid rgb(204, 204, 204);
    border-radius: unset;
    border-left: none;
    background: #e8e8e8;
    &:first-of-type {
      border-left: 2px solid rgb(204, 204, 204);
    }
  }
}
</style>
